<template>
  <div class="lunbo-edit">
    <el-tabs v-model="activeName">
      <el-tab-pane label="编辑" name="1">
        <div class="subhead">
          <p>{{ blockData.content }}</p>
        </div>
        <el-form ref="homebottomForm" :model="homebottomForm">
          <div class="hintheadBox">
            <div class="hinthead">底部qq链接</div>
            <div class="suggest">填入网校的QQ首页地址</div>
            <el-collapse accordion class="elcollapse">
              <el-collapse-item>
                <template slot="title">
                  <span class="title">
                    <i class="el-icon-rank" style="font-size:18px"/>
                    底部qq链接-
                    <a
                      href="#"
                      style="color: #428bca;"
                      target="_Blank"
                    >{{ homebottomForm.bottomQQ.linkText }}</a>
                  </span>
                </template>
                <el-form-item label="链接文本" style="margin-top:22px;">
                  <el-input v-model="homebottomForm.bottomQQ.linkText" style="width:300px;"/>
                </el-form-item>
                <el-form-item label="链接地址">
                  <el-input
                    v-model="homebottomForm.bottomQQ.linkAddress"
                    placeholder="http://"
                    style="width:300px;"
                  />
                </el-form-item>
                <el-form-item label="打开新窗口">
                  <el-radio v-model="homebottomForm.bottomQQ.radio" label="yes">是</el-radio>
                  <el-radio v-model="homebottomForm.bottomQQ.radio" label="no">否</el-radio>
                </el-form-item>
              </el-collapse-item>
            </el-collapse>
          </div>
          <div class="hintheadBox">
            <div class="hinthead">底部微博链接</div>
            <div class="suggest">填入网校的微博首页地址</div>
            <el-collapse accordion class="elcollapse">
              <el-collapse-item>
                <template slot="title">
                  <span class="title">
                    <i class="el-icon-rank" style="font-size:18px"/>
                    底部微博链接-
                    <a
                      href="#"
                      style="color: #428bca;"
                      target="_Blank"
                    >{{ homebottomForm.bottomWeibo.linkText }}</a>
                  </span>
                </template>
                <el-form-item label="链接文本" style="margin-top:22px;">
                  <el-input v-model="homebottomForm.bottomWeibo.linkText" style="width:300px;"/>
                </el-form-item>
                <el-form-item label="链接地址">
                  <el-input
                    v-model="homebottomForm.bottomWeibo.linkAddress"
                    placeholder="http://"
                    style="width:300px;"
                  />
                </el-form-item>
                <el-form-item label="打开新窗口">
                  <el-radio v-model="homebottomForm.bottomWeibo.radio" label="yes">是</el-radio>
                  <el-radio v-model="homebottomForm.bottomWeibo.radio" label="no">否</el-radio>
                </el-form-item>
              </el-collapse-item>
            </el-collapse>
          </div>
          <el-button type="primary" style="margin:20px">保存设置</el-button>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="历史记录" name="2">
        <div v-if="activeName === '2'">
          <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="createTimeStr" label="修改时间" min-width="20" align="center"/>
            <el-table-column prop="userName" label="修改用户" min-width="10" align="center"/>
            <el-table-column prop="manage" label="操作" min-width="20" align="center">
              <template slot-scope="scope">
                <el-button type="primary" @click="preview(scope.row)">预览</el-button>
                <el-button type="success" @click="recovery(scope.row)">恢复此内容</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: '1',
      blockData: {
        content: '彩虹树主题: 首页底部.社交'
      },
      homebottomForm: {
        bottomQQ: {
          linkText: 'QQ',
          linkAddress: '',
          radio: 'yes'
        },
        bottomWeibo: {
          linkText: '微博首页',
          linkAddress: 'http://weibo.com/edusoho',
          radio: 'yes'
        }
      },
      tableData: [
        {
          createTimeStr: '2019-03-06',
          userName: 'testedu'

        }
      ]
    }
  },
  methods: {

  }
}
</script>
<style lang="scss">
.lunbo-edit {
  padding: 0 20px;
  .el-tabs__item {
    font-size: 16px;
  }
  .hintheadBox {
    .el-form-item__label {
      width: 300px;
    }
  }
  .subhead {
    background-color: #f8f8f8;
    width: 100%;
    height: 40px;
    line-height: 40px;
    p {
      margin: 0;
      box-sizing: border-box;
      padding-left: 20px;
    }
  }
  .hintheadBox {
    padding: 0 20px;
    .hinthead {
      font-weight: 700;
      margin-top: 20px;
    }
    .suggest {
      color: #999;
    }
    .elcollapse {
      width: 900px;
      margin-top: 20px;
    }
    .el-collapse-item__header {
      background-color: #f0f3ff;
    }
    .el-collapse-item__header.is-active {
      background-color: #e4fafd;
    }
    .el-collapse-item__header .title {
      font-size: 16px;
      padding: 0 20px;
      width: 500px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
